<template>
<view>
<!--comment.wxml-->
<!--<import src="../../../utils/wxParse/wxParse.wxml"></import>-->
<view class="container">
    <!-- 标题 -->
    <view class="title pad20">
        {{news.title}}
     </view>
     <!-- 发布时间-浏览量 -->
    <view class="plush pad20">
        <text class="mar-right">发布时间：{{news.publish_time}}</text>
        <text>浏览量：{{news.click}}</text>
        <view class="share-btn" @tap.stop="catchShare">
            <image src="/static/images/icon-share.png"></image>
        </view>
     </view>
    <!-- 内容 -->
    <view class="wxParse">
        <jyf-parser :html="article_content"></jyf-parser>
    </view>
    <!-- 上下篇章 -->
    <view class="next pad20">
        <view v-if="up" class="no-data-title " @tap.stop="read" :data-id="up.article_id">上一篇 ： {{up.title}}</view>
        <view v-if="down" class="no-data-title " @tap.stop="read" :data-id="down.article_id">下一篇 ： {{down.title}}</view>
    </view>

    <!-- 猜你喜欢 -->
    <view class="pad20 like" v-if="like.length>0">猜你喜欢</view>
    <view class="goods-container">
        <block v-for="(item, index) in like" :key="index">
       
            <view class="goods-box" :style="'border-bottom:' + (index +1  == like.length ? 10 : 1) + 'rpx  solid #f3f3f3;'" @tap.stop="read" :data-id="item.article_id">
                <navigator class="goods-img" style="float:right;">
                    <image class="wh100" :src="item.thumb?url + item.thumb : resourceUrl"></image>
                </navigator>
                <navigator class="goods-desc">
                    <view class="goods-name ellipsis-1">{{ item.title }}</view>       
                    <view class="buy-time">{{ item.time }} 浏览量:{{item.click}}  </view>
                </navigator>                                
            </view>
        </block>
    </view>

        <!-- 留言板 -->
          <view class="dynamic-comments" v-if="comment.length > 0">
          
          <block v-if="comment.length > 0">
            <view class="comment-content">
            	<view>                  
                <block v-for="(item, index) in comment" :key="index">
                    <view class="comment-content-li">
                    	<view class="commle fl">
                            <image :src="item.head_pic"></image>
                        </view>
                        <view class="commri fr" @tap.stop="is_comment" :data-datas="item">
                        	<view class="commri-p">
                                <text class="commri-b">{{item.nickname|| '游客'}}</text>
                                <text class="commri-i" v-if="item.time < 60">{{item.time||0}}分前</text>
                                <text class="commri-i" v-else-if="item.time < 1440 &&  item.time >= 60">{{item.hour||0}}小时前</text>
                                <text class="commri-i" v-else>{{item.hour||0}}天前</text>
                                <view style="float:right;" @tap.stop="like" :data-comment_id="item.comment_id">
                                <image v-if="item.like_id>0" src="/static/images/list-icon07.png" class="wh35"></image>
                                <image v-else src="/static/images/list-icon02.png" class="wh35"></image>

                                <text :class="' ' + ( item.like_id>0 ? 'like-on' : 'commri-l' )">{{item.like_num}}  </text>
                                </view>
                            </view>  
                            <view class="commri-p">
                                     {{item.content}}
                            </view>                        
                        </view>
                    </view>
                  </block>
                </view>
            </view>
          </block>
            
        </view>

</view>


 <view class="footer">
        <view class="input on">
            <input type="text" placeholder="给你留沙发了" @input="input" :value="comment_text"></input>
             <view class="btn" @tap.stop="send">发送</view>
        </view>
 </view>


 
<!-- 分享海报生成 -->

<view v-if="share_btn">
  <view class="cover-layer" @tap="closePromModal"></view>
  <view class="prom-model">
    <icon type="cancel" color="gray" size="22" class="modal-close" @tap="closeShareModal"></icon>
    <view class="prom-title">分享到朋友圈</view>
    <view class="share-pic">
      <image @tap.stop="previewSharePic" style="width:100%;height:100%" :src="share_pic"></image>
    </view>
    <view class="share-save-btns">
      <view class="share-save-btn" @tap.stop="saveSharePic">保存海报</view>
      <view class="share-tips">保存海报至相册，可在朋友圈分享海报</view>
    </view>

  </view>
</view>

<action-sheet :hidden="actionSheetHidden" @change="listenerActionSheet">
  <action-sheet-item>
    <button class="action-sheet-btn" open-type="share">发送给好友</button>
  </action-sheet-item>
  <action-sheet-item @tap.stop="getSharePic">分享到朋友圈</action-sheet-item>
  <action-sheet-cancel>取消</action-sheet-cancel>
</action-sheet>
</view>
</template>

<script>
// pages/news/news_detail/news_detail.js
var app = getApp();
import LoadMore from "../../../utils/LoadMore";
var load = new LoadMore();
var util = require("../../../utils/util.js");

var request = app.globalData.request;
var common = require("../../../utils/common.js");

export default {
  data() {
    return {
      url: app.globalData.setting.url,
      resourceUrl: app.globalData.setting.resourceUrl + "/static/static/images/user68.jpg",
      news: [],
      down: null,
      up: null,
      like: null,
      comment: null,
      comment_text: '',
      share_btn: false,
      //自定义分享按钮状态
      actionSheetHidden: true //自定义actionSheet隐藏True
      ,
      share_pic: "",
      article_content: ""
    };
  },

  components: {},
  props: {},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    if (options.scene) {
      var scene = decodeURIComponent(options.scene);
      var data = scene.split('&');
      options.article_id = data[0].split('=')[1];
      options.first_leader = data[1].split('=')[1];
    }

    if (options.first_leader) {
      uni.setStorageSync('first_leader', options.first_leader);
    }

    this.getNews(options.article_id);
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {},

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {},

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {},

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {},

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {},

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {},

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    var that = this;
    var url = that.url;
    return {
      title: that.news.title,
      //自定义转发标题
      path: '/pages/news/news_detail/news_detail?first_leader=' + uni.getStorageSync('app:userInfo')['user_id'] + '&article_id=' + that.news.article_id,
      imageUrl: that.news.thumb ? url + that.news.thumb : ''
    };
  },
  methods: {
    getNews: function (article_id) {
      var that = this;
      request.get('/Api/News/news_detail?article_id=' + article_id + '&is_json=1', {
        success: function (res) {
          res.data.result.comment.forEach(function (val, index, arr) {
            if (val.time < 1440 && val.time >= 60) {
              val.hour = parseInt(val.time / 60);
            } else if (val.time > 1440) {
              val.day = parseInt(val.time / 1440);
            }

            if (val.head_pic) {
              val.head_pic = common.getFullUrl(val.head_pic);
            } else {
              val.head_pic = that.resourceUrl;
            }
          });
          res.data.result.news.publish_time = util.format(res.data.result.news.publish_time, 'yyyy-M-d');
          that.setData({
            news: res.data.result.news,
            down: res.data.result.down,
            up: res.data.result.up,
            like: res.data.result.like,
            comment: res.data.result.comment
          });
          //WxParse.wxParse('content', 'html', res.data.result.news.content, that, 6)
          setTimeout(() => {
            that.article_content = res.data.result.news.content;
          }, 200);
        }
      });
    },
    likeFun: function (e) {
      //检查用户是否登录方可操作
      if (!app.globalData.auth.isAuth()) {
        app.globalData.showLoading(null, 1500);
        app.globalData.getUserInfo();
        return;
      }

      var that = this;
      request.post('/Api/News/newsLike', {
        data: {
          comment_id: e.currentTarget.dataset.comment_id
        },
        successReload: true,
        success: function (res) {
          app.globalData.showSuccess(res.data.msg, function () {
            that.getNews(that.news.article_id);
          });
        }
      });
    },
    send: function () {
      var that = this; //检查用户是否登录方可操作

      if (!app.globalData.auth.isAuth()) {
        app.globalData.showLoading(null, 1500);
        app.globalData.getUserInfo();
        return;
      }

      if (that.comment_text == '') {
        return app.globalData.showWarning('请输入评论内容');
      }

      request.post('/Api/News/newsComment', {
        data: {
          article_id: that.news.article_id,
          content: that.comment_text
        },
        success: function (res) {
          if (res.data.status == 1) {
            that.setData({
              comment_text: ''
            });
            app.globalData.showSuccess(res.data.msg, function () {
              uni.setStorageSync('news:comment:update', true);
              that.getNews(that.news.article_id);
            });
          }
        }
      });
    },
    input: function (e) {
      this.setData({
        comment_text: e.detail.value
      });
    },
    read: function (e) {
      this.getNews(e.currentTarget.dataset.id);
    },
    catchShare: function () {
      this.setData({
        actionSheetHidden: false
      });
    },
    listenerActionSheet: function (e) {
      this.setData({
        actionSheetHidden: !this.actionSheetHidden
      });
    },

    /**
     * 获取商品分享海报
     */
    getSharePic: function () {
      var that = this;
      that.setData({
        actionSheetHidden: !this.actionSheetHidden
      });
      uni.showLoading({
        title: '正在生成',
        mask: true
      });
      uni.getImageInfo({
        src: that.url + '/api/News/newsSharePoster?news_id=' + that.news.article_id,
        success: function (res) {
          that.setData({
            share_btn: true,
            share_pic: res.path
          });
        },
        complete: function (res) {
          uni.hideLoading();
        }
      });
    },
    closeShareModal: function () {
      this.setData({
        share_btn: false
      });
    },
    saveSharePic: function () {
      var that = this;
      uni.authorize({
        scope: 'scope.writePhotosAlbum',
        success: function (res) {
          uni.saveImageToPhotosAlbum({
            filePath: that.share_pic,
            success: function (res) {
              that.setData({
                share_btn: false
              });
              uni.showToast({
                title: '保存成功',
                duration: 2000
              });
            }
          });
        },
        fail: function (res) {
          common.checkAuthorize('scope.writePhotosAlbum');
        }
      });
    },
    previewSharePic: function () {
      uni.previewImage({
        urls: [this.share_pic]
      });
    }
  }
};
</script>
<style>
/* comment.wxss */
 
page{
    background-color:#fff;
    overflow-x:hidden;
}
.container{
     overflow-x:hidden;
}
.like-on{
    color: #ff6a00;
    font-size:34rpx;
    float:right;
    margin-right:30px;
}
.wh35{
    width:35rpx;    
    height:35rpx;
    margin-right:10rpx;
}
.wxParse{
    padding: 0rpx 30rpx 0rpx 30rpx;
}
.title{
    font-size: 1.268rem;
    color: #333;
    word-wrap: break-word;
}
.next{
    border-top:  1px solid #f3f3f3;
    width: 100%;
    color:#999;
    border-bottom: 10rpx solid #f3f3f3;
}
.like{
      border-bottom: 1px solid #f3f3f3;
}
.next view{
    width: 700rpx;
    font-size:28rpx;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.pad20{
    padding:20rpx;
}
.plush text{
    font-size: .7222rem;
    color: #999;
}
.mar-right{
    margin-right: 0.768rem;
}
.container {
    padding-bottom:100rpx;
}
.type-navbar{
    white-space: nowrap;
    display: flex;
    width: 100%;
    height:80rpx;
    background-color: #fff;
}
.type-box{
    width:33.3333333333%;
    box-sizing: border-box;
    font-size: 28rpx;
    line-height: 80rpx;
    padding: 0 20rpx;
    text-align: center;
    display: inline-block;
    overflow: hidden;
}
.type-navbar-item{
    border-bottom: 4rpx solid #fff;
}
.type-item-on{
  position: relative;
  font-weight: bold;
  color:#ff6a00;
}
.type-item-on::before{
  content: '';
  display: block;
  bottom: 0;
  position: absolute;
  width: 50rpx;
	height: 5rpx;
	background-color: #ff6a00;
  left: 76rpx;
}
.goods-container{
    margin: 10rpx 10rpx;
    background-color: #fff;
}
.goods-box{
    position: relative;
    font-size: 28rpx;
    overflow: hidden;
    border-bottom: 10rpx solid #f0f1f3;
}
.mar-bottom{
    margin-bottom:20rpx;
}
.goods-img{
    float:left; 
    height: 200rpx;
    width: 180rpx;
}
.goods-desc{
    float:left;
    width: 550rpx;
    padding: 20rpx 25rpx 0 40rpx;
    box-sizing: border-box;
}
.wh100{
    padding: 20rpx 25rpx 0 0rpx;
    height: 160rpx;
}
.goods-name{
    height: 85rpx;
    line-height: 30rpx;
    overflow: hidden;
    white-space: normal;
    font-size: 26rpx;
    -webkit-box-orient: vertical;
    -webkit-line-clamp:2;
    display: -webkit-box;
    word-break: break-all;
    text-overflow: ellipsis;
    margin-bottom: 20rpx;
}
.buy-time{
    margin-top: 14rpx;
    font-size: 22rpx;
    color: #b3b3b3;
}
.comment-button{
    font-size: 22rpx;
    color: #ff3939;
    border: solid 1rpx #ff3737; 
    border-radius: 40rpx;
    padding: 5rpx 20rpx;
    position: absolute;
    right: 20rpx;
    bottom: 12rpx;
}
.check-evaluate{
  border: solid 1px #f3f3f3;
  color: #1c1c1c;
}
.change-order{
    color: #c2c2c2;
    border: 1rpx solid #f3f3f3;
}
.button-icon{
    height: 26rpx;
    width: 26rpx;
}
.c-specification{
  font-size: 22rpx;
  color: #999999;
}
.footer{
    width: 100%;
    height: 3.091rem;
    background-color: #fafafa;
    border-top: 1px solid #f3f3f3;
    position: fixed;
    z-index: 10;
    bottom: 0;
    left: 0;
}
.footer .input {
    width: calc(100% - 1.28rem);
}
.footer .input{
    position: absolute;
    height: 2.28rem;
    border-radius: 0.64rem;
    border: 1px solid #f3f3f3;
    background-color: #f0f0f0;
    top: 0.405rem;
    left: 0.64rem;
    background-size: 0.683rem;
    background-position: 0.491rem 0.299rem;
    background-repeat: no-repeat;
    transition: .3s;
    overflow: hidden;
}
.footer .input.on input {
    width: calc(100% - 3.627rem);
}
.footer .input input {
    float: left;
    display: block;
    height: 2.28rem;
    margin-left: 1.536rem;
    border: none;
    outline: none;
    color: #666;
    font-size: 0.597rem;
    background-color: transparent;
    transition: .3s;
}
.footer .input .btn {
    float: right;
    width: 1.877rem;
    height: 2.024rem;
    margin: 0.107rem;
    border-radius: 0.512rem;
    background-color: #dbdbdb;
    color: #666;
    font-size: 0.512rem;
    line-height: 2.024rem;
    text-align: center;
}

/** 留言板s **/
.dynamic-comments{ width:100%; height:auto; padding:0 24rpx 24rpx; margin-top:21rpx;}
.comment-content{ width:100%;}
.comment-content-li{ overflow:hidden; margin-top:36rpx;}
.commle{ width:100rpx; height:100rpx;}
.commle image{ width:100rpx; height:100rpx;border-radius:45%;}
.fl{
    float: left;
}
.fr{
    float: right;
}
.fr{
    float: right;
}
.commri{ width:610rpx;}
.commri-p{ padding-top:0!important; font-size:26rpx; color:#333;}
.commri-b{ font-size:22rpx; color:#F27747; margin-right:30rpx;}
.commri-i{ font-size:22rpx; color:#999;}
.commri-l{ font-size:34rpx; color:#999;float:right;margin-right:30px;}
.commri-em{ color:#F27747;}
/** 留言板e **/


/** 分享海报 **/
.share-save-btns{
    background-color: #fff;
    width: 100%;
    line-height: 80rpx;
}

.share-save-btn {
    width: 80%;
    height: 80rpx;
    text-align: center;
    margin: 0px auto;
    background-color: #ff6a00;
    color: #fff;
    border-radius: 10rpx;
}

.share-pic {
    width: 270rpx;
    height: 480rpx;
    margin: 20rpx auto ;
    background-color: #999;
    box-shadow: 0rpx 5rpx 5rpx 5rpx #cccccc
}

.share-tips {
    font-size: 9pt;
    color: #999;
    display: block;
    margin-top: 10rpx;
    width: 100%;
    text-align: center;
}

.action-sheet-btn{
    width: 100%;
    height: 100%;
    margin: -10px 0;
    font-size: 18px;
}

.action-sheet-btn::after{   
    border: none;   
}
.bargin_head_pic{
    width: 1rem;
    height:1rem;
    margin-left: -15rpx;
    border-radius: 50%;
    border:4px #fff solid 
}
.bargin_headpic{
    margin-top:32rpx;
}

.classname{
    margin-top:-18px;
    font-size:.6777rem;
    color:#fff;
}
.wxParse-p image{
  width: 95%!important;
}
.co-red-price{
  font-size: 33rpx;
  font-weight: bold;
  float: left;
}

.share-btn {
    display: inline-block;
    margin-top: 12rpx;
    margin-left: 12rpx;
    height: 50rpx;
    width: 50rpx;
    float: right;
    margin-top:0px;
}

.share-btn image{
    width: 100%;
    height: 100%;
}

.prom-model{
    position: fixed;
    bottom: 0;
    z-index: 1000;
    background: white;
    width: 100%;
    padding: 0 30rpx 30rpx;
    font-size: 32rpx;
    box-sizing: border-box;
    overflow-x: hidden;
}
.prom-model .prom-title{
    text-align: center;
    margin: 30rpx 0;
}
.prom-model .logistics-item{
    border: 0;
}
.prom-model .item-mes{
    width: 500rpx;
}
.integral-btn{
    width: 100%;
    padding: 0rpx;
    margin: 0rpx;
}
</style>